<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" th:href="@{../../favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{../../css/font.css}">
    <link rel="stylesheet" th:href="@{../../css/xadmin.css}">
    <link rel="stylesheet" th:href="@{../../css/login.css}">
    <script charset="utf-8" th:src="@{../../lib/layui/layui.js}" type="text/javascript"></script>
    <!--    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>-->
    <script th:src="@{../../js/jquery-3.5.1.min.js}" type="text/javascript"></script>

</head>
<body class="login-bg">

<div class="logo">
    <img alt="西安建筑科技大学总务处" src="" th:src="@{../../images/logo.png}">
</div>

<div class="login">
    <div class="message">后台管理员注册</div>
    <div style="width: 100%; height: 30px"></div>

    <form class="layui-form">
        <label for="phone">手机号
            <input autocomplete="off" class="layui-input" id="phone" lay-verify="L_phone" placeholder="请输入您的手机号"
                   required="required"
                   type="text">
        </label>
        <hr class="hr15">
        <label for="username">用户名
            <input autocomplete="off" class="layui-input" id="username" lay-verify="L_userName" placeholder="请输入用户名"
                   required="required"
                   type="text">
        </label>
        <hr class="hr15">
        <label for="password">密码
            <input class="layui-input" id="password" lay-verify="L_Pwd" placeholder="请输入密码" required="required"
                   type="password">
        </label>
        <hr class="hr15">
        <label for="rePassword">确认密码
            <input class="layui-input" id="rePassword" lay-verify="L_rePwd" placeholder="确认密码" required="required"
                   type="password">
        </label>
        <hr class="hr15">
        <input class="layui-btn" lay-filter="register" lay-submit="" type="submit" value="注册">
        <hr class="hr15">
    </form>
</div>

<div class="copyright">
    <a href="http://zwc.xauat.edu.cn/" style="color: white" target="_blank">版权所有　© 西安建筑科技大学总务处</a>
</div>

<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        // 自定义验证规则
        form.verify({
            L_phone: [/^1[3|4|5|7|8][0-9]{9}$/, '请输入正确的手机号码']
            , L_userName: function (value) {
                if (value.length < 5) {
                    return "用户名至少5个字符";
                }
            }
            , L_Pwd: [/(.+){6,12}$/, '密码必须6到12位']
            , L_rePwd: function (value) {
                if ($('#password').val() !== value) {
                    return "两次密码输入不一致";
                }
            }
        });

        // 监听提交
        form.on('submit(register)',
            function () {
                var phone = document.getElementById("phone").value;
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                // 发送异步请求，把数据提交到后端
                $.ajax({
                    url: "/admin/register",
                    data: {
                        userName: username,
                        password: password,
                        phone: phone
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code === 0) {
                            layer.msg(data.msg, {icon: 1, time: 1500, shade: 0.4}, function () {
                                window.location.href = "/admin/login";
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000, shade: 0.4}, function () {
                                document.getElementById("username").value = "";
                                document.getElementById("password").value = "";
                                document.getElementById("rePassword").value = "";
                            })
                        }
                    }
                });
                return false;
            });

    });
</script>

</body>
</html>